<template>
  <div class="select-incon-view">
    <Gird :girdData="processGridsData" :gutter="'0px'" :gutterBottom="'0px'" :columnNum="5" :outBorder="false">
      <template #content="acceptProps">
        <GridItem
          shadow="never"
          :icon="acceptProps.item.icon"
          @triggerGridItem="triggerGridItem(acceptProps.item)"
        >
        </GridItem>
      </template>
    </Gird>
  </div>
</template>
<script>
import Gird from '@/components/common/Gird'
import GridItem from '@/components/common/GridItem'
export default {
  /**
   * 选择Icon 组件
   */
  name: 'SelectIncon',
  props: {
  },
  components: {Gird, GridItem},
  data () {
    return {
      processGridsData: [
        {
          icon: 'scp_home_16'
        },
        {
          icon: 'scp_home_18'
        },
        {
          icon: 'scp_home_20'
        },
        {
          icon: 'scp_home_22'
        },
        {
          icon: 'scp_home_24'
        },
        {
          icon: 'scp_home_26'
        },
        {
          icon: 'scp_home_28'
        },
        {
          icon: 'scp_home_30'
        },
        {
          icon: 'scp_home_32'
        },
        {
          icon: 'scp_home_34'
        },
        {
          icon: 'scp_home_36'
        },
        {
          icon: 'scp_home_38'
        },
        {
          icon: 'scp_home_40'
        },
        {
          icon: 'scp_home_42'
        },
        {
          icon: 'scp_home_44'
        },
        {
          icon: 'scp_home_46'
        },
        {
          icon: 'scp_home_48'
        },
        {
          icon: 'scp_home_50'
        },
        {
          icon: 'scp_home_52'
        },
        {
          icon: 'scp_home_54'
        },
        {
          icon: 'scp_home_56'
        },
        {
          icon: 'scp_home_58'
        },
        {
          icon: 'scp_home_60'
        },
        {
          icon: 'scp_home_62'
        },
        {
          icon: 'scp_home_64'
        },
        {
          icon: 'scp_home_66'
        },
        {
          icon: 'scp_home_68'
        },
        {
          icon: 'scp_home_70'
        }
      ]
    }
  },
  created () {
  },
  methods: {
    triggerGridItem (v) {
      this.$emit('triggerGridItem', v)

    }
  },
  watch: {
  }
}
</script>
<style lang="scss">
.select-incon-view {
  width: 400px;
  border: 1px solid #eee;
  .grid-content {
    height: 76px !important;
    .grid-card {
      height: 60px !important;
    }
  }
}
</style>
